<template>
    <div class="addgoods">
        <el-card class="box-card">
            <el-button type="primary" size="large" class="ml500" @click="saveData">保存</el-button>
            <el-collapse v-model="activeNames">
                <el-collapse-item class="p20" title="商品基本信息" name="1">
                    <!-- 第一行数据 -->
                    <el-row>
                        <el-col :span="12"> 商品名称:<el-input v-model="descriptValue" class="short"></el-input> </el-col>
                        <el-col :span="12"> 商品编号:<el-input v-model="descriptValue" class="short"></el-input> </el-col>
                    </el-row>
                    <!-- 第二行数据 -->
                    <el-row>
                        <el-col :span="12">
                            <span class="ml25">排序:</span><el-input v-model="descriptValue" class="short"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <span class="ml">标签名:</span> <el-input v-model="descriptValue" class="short"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            商品类型:
                            <el-select v-model="typeValue" placeholder="请选择商品类型">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            商品品牌:
                            <el-select v-model="typeValue" placeholder="请选择商品品牌">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            商品分类:
                            <el-select v-model="typeValue" placeholder="请选择商品分类">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            支持使用满减卷:
                            <el-select v-model="isCountDown">
                                <el-option v-for="item in countDown" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            支持使用粮票:
                            <el-select v-model="isCountDown">
                                <el-option v-for="item in countDown" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <span class="ml">支持使用积分:</span>
                            <el-select v-model="isCountDown">
                                <el-option v-for="item in countDown" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <span class="ml20">状态:</span>
                            <el-select v-model="proState">
                                <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row> 商品描述:<el-input v-model="descriptValue" class="descript"></el-input> </el-row>
                    <el-row>
                        <el-col :span="12"> 商品详情图: </el-col>
                        <el-col :span="12"> 缩略图: </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="规格信息" name="2">
                    <el-table :data="tableData" style="width: 100%" border stripe>
                        <el-table-column prop="date" label="规格名称" width="180" align="center"> </el-table-column>
                        <el-table-column prop="name" label="所属仓库" width="180" align="center"> </el-table-column>
                        <el-table-column prop="address" label="排序" align="center" width="48"> </el-table-column>
                        <el-table-column prop="date" label="市场价" width="80" align="center"> </el-table-column>
                        <el-table-column prop="name" label="零售价" width="90" align="center"> </el-table-column>
                        <el-table-column prop="address" label="可使用积分数" align="center" width="93"> </el-table-column>
                        <el-table-column prop="date" label="是否启用VIP价" width="105" align="center"> </el-table-column>
                        <el-table-column prop="name" label="VIP价" width="77" align="center"> </el-table-column>
                        <el-table-column prop="address" label="SVIP价" align="center" width="97"> </el-table-column>
                        <el-table-column prop="date" label="是否启用店主价" width="111" align="center"> </el-table-column>
                        <el-table-column prop="name" label="店主价" width="77" align="center"> </el-table-column>
                        <el-table-column prop="address" label="操作" align="center"> </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="商品轮播图信息" name="3">
                    <el-table :data="tableData" style="width: 100%" border stripe>
                        <el-table-column prop="name" label="图片" align="center"> </el-table-column>
                        <el-table-column prop="address" label="操作" align="center">
                            <el-button type="primary" @click="delePro">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>
</template>

<script>
export default {
  name: 'addgoods',
  data () {
    return {
      activeNames: ['1'],
      descriptValue: '',
      options: [],
      isCountDown: '不支持',
      typeValue: '',
      proState: '下架',
      countDown: [{
        value: '支持',
        label: '支持'
      },
      {
        value: '不支持',
        label: '不支持'
      }
      ],
      state: [{
        value: '下架',
        label: '下架'
      },
      {
        value: '上架',
        label: '上架'
      }
      ],
      tableData: [{ name: 'zjs' }]
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    saveData () {
      this.$router.push('/goodsmanage')
    },
    async delePro () {
    //   console.log(11)
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
.descript {
    width: 800px;
}

.el-row {
    margin-bottom: 20px;
    padding: 0 30px;
}

.short {
    width: 200px;
}

.ml25 {
    margin-left: 25px;
}

.ml {
    margin-left: 13px;
}

.el-input,
.el-select {
    margin-left: 10px;
}

.ml20 {
    margin-left: 55px;
}

.ml500 {
    margin-left: 1200px;
}
</style>
